jQuery(document).ready(function($) {
    /* initialize the external events */
    var gid = 1; // event.id == 0 considered to be undefined (boo)
    var dragged = null;
    jQuery('#external-events div.external-event').each(function() {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: jQuery.trim(jQuery(this).text()),// use the element's text as the event title
            id: gid++
        };

        // store the Event Object in the DOM element so we can get to it later
        jQuery(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        jQuery(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });
    var isElemOverDiv = function(draggedItem, dropArea) {
        // Prep coords for our two elements
        var a = draggedItem.offset;

        a.right = draggedItem.helper.width() + a.left;
        a.bottom = draggedItem.helper.height() + a.top;

        var b = dropArea.offset();
        b.right = $(dropArea).width() + b.left;
        b.bottom =$(dropArea).height() + b.top;

        if (a.left >= b.left
            && a.top >= b.top
            && a.right <= b.right
            && a.bottom <= b.bottom) { return true; }
        return false;
    }

    jQuery('#events').droppable({
        drop: function( event, ui ) {
            if ( dragged && ui.helper && ui.helper[0] === dragged[0] ) {
                var event = dragged[1];
                jQuery('#calendar').fullCalendar('removeEvents', event.id);
                var el = jQuery( "<div class='external-event'>" ).appendTo( this ).text( event.title );
                el.draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });
                el.data('eventObject', { title: event.title, id :event.id });
            }
        }
    });

    /* initialize the calendar */
    jQuery('#calendar').fullCalendar({
        header: {
            left: 'month,agendaWeek,agendaDay',
            center: 'title',
            right: 'today, prev, next'
        },
        buttonText: {
            prev: '&laquo;',
            next: '&raquo;',
            prevYear: '&nbsp;&lt;&lt;&nbsp;',
            nextYear: '&nbsp;&gt;&gt;&nbsp;',
            today: '今天',
            month: '月',
            week: '周',
            day: '日'
        },
        allDaySlot: true,
        axisFormat: 'h:mm',
        allDayText: '全天',
        monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月',
            '八月', '九月', '十月', '十一月', '十二月'],
        monthNamesShort:['一月', '二月', '三月', '四月', '五月', '六月', '七月',
            '八月', '九月', '十月', '十一月', '十二月'],
        dayNamesShort:['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        dayNames:['星期一', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        titleFormat:{
            month: 'yyyy MMMM',                             // September 2009
            week: "yyyy MMM d[ yyyy]{ '至'[ MMM] d}", // Sep 7 - 13 2009
            day: 'dddd, MMM d, yyyy'                  // Tuesday, Sep 8, 2009
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = jQuery(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = jQuery.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?

            jQuery(this).remove();

        },eventClick: function(calEvent, jsEvent, view) {

            //  alert('Event: ' + calEvent.title);
            // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
            // alert('View: ' + view.name);
            // jQuery(this).css('border-color', 'red');

        },
        eventDragStop: function(event, jsEvent, ui, view) {

            if (isElemOverDiv(ui, jQuery('#external-events'))) {


            }

        },
        eventRender: function(event, element) {
            element.bind('dblclick', function() {

            });
            element.bind('click', function() {

            });

        },
        eventDragStart: function( event, jsEvent, ui, view ) {
            dragged = [ ui.helper[0], event ];
        }
    });
});
